<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width">
    <title>Media Chrome Captions Menu</title>
    <script type="module" src="../../../dist/index.js"></script>
    <script type="module" src="../../../dist/menu/index.js"></script>
    <style>
      .examples {
        margin-top: 20px;
      }

      /** add styles to prevent CLS (Cumulative Layout Shift) */
      media-controller:not([audio]) {
        display: block;         /* expands the container if preload=none */
        max-width: 640px;       /* allows the container to shrink if small */
        aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
      }

      video {
        width: 100%;      /* prevents video to expand beyond its container */
      }
    </style>
  </head>
  <body>
    <!-- The main tag is used to exclude other body content in https://www.media-chrome.org/docs/en/examples -->
    <main>
      <h1>Captions Menu</h1>

      <media-controller id="mc" defaultsubtitles>
        <video
          slot="media"
          src="https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4"
          preload="metadata"
          muted
          crossorigin
        >
          <track label="English" kind="captions" srclang="en" src="../vtt/elephantsdream/captions.en.vtt" default></track>
          <track label="Japanese" kind="captions" srclang="ja" src="../vtt/elephantsdream/captions.ja.vtt"></track>
          <track label="Swedish" kind="captions" srclang="sv" src="../vtt/elephantsdream/captions.sv.vtt"></track>
          <track label="Russian" kind="captions" srclang="ru" src="../vtt/elephantsdream/captions.ru.vtt"></track>
          <track label="Arabic" kind="captions" srclang="ar" src="../vtt/elephantsdream/captions.ar.vtt"></track>
          <track label="Subs English" kind="subtitles" srclang="en" src="../vtt/elephantsdream/captions.en.vtt" default></track>
          <track label="Subs Japanese" kind="subtitles" srclang="ja" src="../vtt/elephantsdream/captions.ja.vtt"></track>
          <track label="Subs Swedish" kind="subtitles" srclang="sv" src="../vtt/elephantsdream/captions.sv.vtt"></track>
          <track label="Subs Russian" kind="subtitles" srclang="ru" src="../vtt/elephantsdream/captions.ru.vtt"></track>
          <track label="Subs Arabic" kind="subtitles" srclang="ar" src="../vtt/elephantsdream/captions.ar.vtt"></track>
        </video>
        <media-control-bar>
          <media-play-button></media-play-button>
          <media-seek-backward-button seekoffset="15"></media-seek-backward-button>
          <media-seek-forward-button seekoffset="15"></media-seek-forward-button>
          <media-mute-button></media-mute-button>
          <media-time-range></media-time-range>
          <media-time-display showduration remaining></media-time-display>
          <media-captions-button></media-captions-button>
          <media-captions-menu anchor="auto" hidden></media-captions-menu>
          <media-captions-menu-button></media-captions-menu-button>
          <media-fullscreen-button></media-fullscreen-button>
        </media-control-bar>
      </media-controller>
    </main>

    <br>

    <button type="button" class="remove">Remove First Track</button>

    <h2>Default</h2>

    <media-captions-menu mediacontroller="mc"></media-captions-menu>

    <h2>Disabled</h2>

    <media-captions-menu mediacontroller="mc" disabled></media-captions-menu>

    <br>

    <script>
      document.querySelector('.remove').addEventListener('click', () => {
        document.querySelector('video').firstElementChild?.remove();
      });
    </script>

    <div class="examples">
      <a href="../">View more examples</a>
    </div>
  </body>
</html>
